<template>
  <div v-show="show" class="modal">
    <div class="mask" @touchend="close(true)"></div>
    <div class="modal-wrapper">
      <div class="modal-dialog">
        <div class="modal-header">
          <slot name="header">
            <h3>{{title}}</h3>
          </slot>
        </div>
        <div class="modal-body">
          <slot name="body">
            {{content}}
          </slot>
        </div>
        <div class="modal-footer">
          <slot name="footer">
            <div class="actions">
              <div class="btn" @touchend="emit('confirm')">确定</div>
              <div class="btn" @touchend="emit('cancel')">取消</div>
            </div>
          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  module.exports = {
    props: {
      show: {
        type: Boolean,
        // required: true,
        default: false
      },

      title: {
        type: String,
        default: '提示'
      },

      content: {
        type: String,
        default: '提示内容'
      },

      canClickOutClose: {
        show: {
          type: Boolean,
          // required: true,
          default: true
        }
      }
    },
    mounted () {
    },
    methods: {
      close (isOut) {
        if (!this.canClickOutClose && isOut) return
        this.emit('close')
      },

      emit (...params) {
        this.$emit(...params)
      }
    }
  }
</script>

<style lang="stylus">

  .modal
    position fixed
    top 0
    left 0
    width 100%
    height 100%
    background transparent
    z-index 1000
    display table
    color #555
    .mask
      width 100%
      height 100%
      position absolute
      left 0
      top 0
      background rgba(0,0,0, 0.6)
    .modal-wrapper
      display table-cell
      vertical-align middle
      box-sizing border-box
    .modal-dialog
      position relative
      background #FFF
      margin 0 auto
      width 80%
      max-width 14rem
      box-shadow 0 2px 8px rgba(0, 0, 0, .3)
      transition all .3s ease
      border-radius rem(10)
      .tips
        font-size 0.4rem
        text-align center
        color #999
    .modal-header
      padding 0.5rem 0.6rem 0

      h3
        font-weight normal
        color #777
        margin 0
        text-align center
        font-size 0.4rem

    .modal-body
      padding 0.6rem
      width 100%
      box-sizing border-box
      p
        text-align center
        font-size 0.5rem
        color #666666
        padding-bottom 1rem
    .modal-footer
      .actions
        border-top 1px solid #CCC
        display flex

        .btn
          background transparent
          border-right 1px solid #CCC
          // color #09b85a
          color #555
          box-sizing border-box
          flex 1
          text-align center
          font-size 0.4rem
          height 1.1rem
          line-height 1.1rem
          border-radius 0
          &:last-child
            border-right none
</style>
